<template>
	<view class="style-ten dir-left-nowrap">

		<app-category-list @click="active" :list="list" v-if="list.length>0" :noSetHeight="setHeight+'rpx'"
			:theme="theme"></app-category-list>

		<scroll-view scroll-y v-if="list.length !== 0"
			:class="goods_list.length > 0 && list.length === 0 ? 'goods-list-right' : 'right'" @scrolltolower="lower"
			:style="{height: `${setHeight}rpx`}">
			<view>
				<app-jump-button :open_type="list[activeIndex].advert_open_type"
					:params="list[activeIndex].advert_params" :url="list[activeIndex].advert_url">
					<image class="advert_pic" :src="list[activeIndex].advert_pic" v-if="list[activeIndex].advert_pic">
					</image>
				</app-jump-button>
			</view>
			<second-class :acvitiveall="acvitiveall" v-if="list.length !== 0 && list[activeIndex].child.length !== 0"
				@setNav="setNav" @setAllNav="setAllNav" :list="list[activeIndex].child" :activeIndexTwo="activeIndexTwo"
				:theme="theme">
			</second-class>
			<view class=""
				:style="{'margin-top': list.length !== 0 && list[activeIndex].child.length !== 0 ? '126rpx' : '0'}">
				<product-list v-if="goods_list.length > 0 && list.length > 0" :goods_list="goods_list" @attr="attr"
					:theme="theme"></product-list>
			</view>


			<template v-if="goods_list.length === 0 && list.length !== 0 && is_over_goods">
				<app-no-goods title="该分类下无相关内容哦~"></app-no-goods>
			</template>

		</scroll-view>

		<goods-list v-if="goods_list.length > 0 && list.length === 0" :goods_list="goods_list" @attr="attr"
			:theme="theme"></goods-list>

		<view class="no-empty main-center" v-if="list.length === 0 && goods_list.length === 0">
			<app-no-goods title="该分类下无相关内容哦~" background="#f7f7f7"></app-no-goods>
		</view>

	</view>
</template>

<script>
	import appCategoryList from '../../../components/page-component/app-category-list/app-category-list.vue';
	import productList from './product-list.vue';
	import goodsList from './goods-list.vue';
	import secondClass from './second-class.vue';
	import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';

	export default {
		name: "style-ten",

		components: {
			'app-category-list': appCategoryList,
			'product-list': productList,
			'app-no-goods': appNoGoods,
			'goods-list': goodsList,
			'second-class': secondClass
		},

		props: [`list`, `activeIndex`, `setHeight`, `goods_list`, `activeIndexTwo`, `theme`, `is_over_goods`,
			'acvitiveall'
		],
data(){
	return {
		// 是否显示选择
		choice: true,
	}
},

		methods: {
			active(item, index) {
				this.$emit('requestGoods', item, index);
				this.$emit('active', item);
				this.$emit('page');
			},

			lower() {
				console.log(this.activeIndexTwo, 'this.activeIndexTwo');
				if (this.list[this.activeIndex].child.length > 0) {
					this.$emit('lower', this.list[this.activeIndex].child[this.activeIndexTwo]);
				} else {
					this.$emit('lower', this.list[this.activeIndex]);
				}
			},
			setAllNav() {
				this.$emit('setAllNav');
			},
			setNav(it, key) {
				this.$emit('setNav', it, key);
			},

			attr(previewUrl, submitUrl, attr_groups, goods) {
				this.$emit('attr', previewUrl, submitUrl, attr_groups, goods);
			},

			route_advert(data) {
				this.$emit('route_advert', data);
			}
		},

	}
</script>

<style scoped lang="scss">
	.right {
		width: #{546upx};
		background-color: white;
		padding-left: #{24upx};
	}

	.goods-list-right {
		width: #{750upx};
		background-color: white;
	}

	.advert_pic {
		width: #{500rpx};
		height: #{184rpx};
		margin: #{20upx 24upx 20upx 0};
	}

	.item {
		padding: #{20upx 0};
	}

	.no-empty {
		width: 100%;
		margin-top: #{150upx};
	}
</style>
